<template>
	<view class="home">
		<!-- 首页标题栏 -->
		<StatusHeader></StatusHeader>
		
		<!-- 公告 -->
		<IndexNoticeBar></IndexNoticeBar>
		
		<!-- 切换标签 -->
		<view class="change_tag">
			<view class="tag">
				<text>全部</text>
			</view>
		</view>
		
		<!-- 产品展示区域 -->
		<view class="pro_list">
			<!-- 滚动区域 -->
			<scroll-view scroll-y="true" >
				<!-- 产品卡片 -->
				<view class="index_product_cart" v-for="item in 3">
					<uni-card >
						<!-- 产品卡头部 -->
						<template  v-slot:title>
							<view class="cart_header">
								<view class="header_left">
										<image class="pro_header_img" src="../../static/imgs/logo.jpg" mode="aspectFill">
										</image>
										<view class="pro_header_title">
											阳关优选
										</view>
								</view>
								<!-- <view class="header_right">
									<uni-icons type="more" size="30"></uni-icons>
								</view> -->
							</view>
							
						</template>
						<!-- 产品卡主题内容 -->
						<view class="pro_item">
							<!-- 商品标题 -->
							<view class="pro_title">
								<view class="pro_desc">
									<text>万人团，新品上市，全日记爆炸盐第三代来袭！！！旗舰店一桶54我们团购一桶39，十分划算哦~~~~~~~~~</text>
								</view>
								<view class="date_mast">
									
								</view>
								<view class="push_date">
									<text>近期发布</text>
								</view>
							</view>
							
							<!-- 商品价格 -->
							<view class="price_content">
								<text class="rmb_text">¥</text>
								<text>36 - 69</text>
							</view>
							
							<!-- 商品图片 -->
							<view class="img_list_content">
								<view class="img_list_item">
									<image class="img_item" src="../../static/imgs/logo.jpg" mode="aspectFill"></image>
								</view>
								<view class="img_list_item">
									<image class="img_item" src="../../static/imgs/test1.jpg" mode="aspectFill"></image>
								</view>
								<view class="vdioe_list_item">
									<video object-fit="fill" class="myVideo"  src="../../static/imgs/2222.mp4"></video>
								</view>
							</view>
							
							<!-- 操作栏 -->
							<view slot="actions" class="card-actions">
								<!-- 左侧商品参与信息 -->
								<view class="add_info_layout">
									<view class="avtor_list">
										<image class="avtor_list_item" src="../../static/imgs/logo.jpg" mode="aspectFill"></image>
										<image class="avtor_list_item" src="../../static/imgs/logo.jpg" mode="aspectFill"></image>
									</view>
									<view class="add_info_detail">
										<text class="info_deatial">135人跟团|579人看过</text>
									</view>
									
								</view>
								<!-- 右侧分享 -->
								<view class="card-actions-item" @click="actionsClick('分享')">
									<button class="share_button">
										<uni-icons color="rgb(7, 193, 96)" type="weixin" size="25"></uni-icons>
										<text class="card-actions-item-text">分享</text>
									</button>
									
								</view>
							</view>
						</view>
						
					</uni-card>
				</view>
				
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
const popup = ref()

const open = ()=>{
	console.log(111);
	popup.open('top');
}

//挂载生命周期函数
onMounted(()=>{
	//加载商品列表
	
})

</script>

<style lang="scss" scoped>
.home{
	height: 100vh;
	width: 100%;
	display: felx;
	flex-direction: column;
	.change_tag{
		width: 100%;
		.tag{
			font-size: 44rpx;
			font-weight: 800;
			padding-left: 29rpx;
			margin-top: 12rpx;
		}
	}
	.pro_list{
		.index_product_cart{
			width: 100%;
			.cart_header{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				height: 100rpx;
				border-bottom: 1rpx solid $border-color;
				.header_left{
					display: flex;
					flex-direction: row;
					align-items: center;
					.pro_header_img{
						width: 60rpx;
						height: 60rpx;
					}
					.pro_header_title{
						padding-left: 5rpx;
						font-size: 30rpx;
						font-weight: 500;
					}
				}
			}
			.pro_item{
				display: flex;
				flex-direction: column;
				justify-content: left;
				.pro_title{
					position: relative;
					.pro_desc{
						color: #000;
						font-size: 34rpx;
						font-weight: 800;
						line-height: 1.0em;
					}
					.push_date{
						color: $text-font-color-2;
						position: absolute;
						right: 0;
						bottom: -10rpx;
					}
					
					
				}
				.price_content{
					margin-top: 15rpx;
					color: rgb(255, 103, 34);
					font-size: 50rpx;
					font-weight: 600;
					.rmb_text{
						color: rgb(255, 103, 34);
						font-size: 34rpx;
						font-weight: 600;
					}
				}
				.img_list_content{
					display: flex;
					justify-content: space-around;
					.img_list_item{
						background-color: #000;
						width: 190rpx;
						height: 190rpx;
						border-radius: 15rpx;
						.img_item{
							width: 100%;
							height: 100%;
						}
					}
					.vdioe_list_item{
						width: 190rpx;
						height: 190rpx;
						.myVideo{
							width: 100%;
							height: 100%;
						}
					}
				}
				.card-actions {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						height: 45px;
						border-top: 1px #eee solid;
						margin-top: 25rpx;
						padding-top: 15rpx;
						.add_info_layout{
							height: 100%;
							display: flex;
							align-items: center;
							flex-direction: row;
							position: relative;
							.avtor_list{
								height: 100%;
								.avtor_list_item{
									position: absolute;
									width: 75rpx;
									height: 75rpx;
									border-radius: 50%; /* 如果头像为圆形 */
									&.avtor_list_item:nth-child(1){
										left: 0;
										  top: 0;
										  z-index: 1;
									}
									&.avtor_list_item:nth-child(2){
										left: 35rpx;
										  z-index: 2;
									}
									&.avtor_list_item:nth-child(3){
										left: 35rpx;
										z-index: 3;
									}
								}
							}
							.add_info_detail{
								position: absolute;
								left: 125rpx;
								width: 300rpx;
								top: 25%;
								.info_deatial{
									font-size: 27rpx;
									color: rgb(7, 193, 96);
									font-weight: 600;
								}
							}
						}
						.card-actions-item {
							display: flex;
							flex-direction: row;
							align-items: center;
							.share_button{
								color:rgb(7, 193, 96) ;
								padding: 0;
								width: 120rpx;
								height: 50rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								.card-actions-item-text{
									font-size: 20rpx;
									line-height: 0.7em;
								}
							}
						}
					}
					
			}
		}
	}
}
</style>
